<template>
  <!-- Container为背景 -->
  <Container>
    <!-- 标题内容 -->
    <main
      class="content"
      @scroll="handleScroll"
    >
      <!-- 内容卡片 -->
      <questioncarddetail
        :item="questionitem"
        @commentSaved="fetchData"
      ></questioncarddetail>

      <div class="header">
        <h2>评论</h2>
      </div>
      <div>
        <commentcard
          v-for="item in commentitem"
          :key="item.id"
          :item="item"
        >
        </commentcard>
      </div>
    </main>
  </Container>
</template>

<script setup>
import questioncarddetail from '../components/main/questioncarddetail.vue';
import commentcard from '../components/main/commentcard.vue';
import Container from '../components/main/container.vue';
import { ref, computed, onMounted } from 'vue';
import { get, post } from "@/net";
import { ElMessage } from 'element-plus';
import { useAccountStore } from "@/store";
const props = defineProps({
  id: {
    type: Number,
    required: true
  }
})
const questionitem = ref({})
const commentitem = ref({})
const commentText = ref('');
const isCommenting = ref(false);  // 控制评论框的显示与隐藏
const totalItems = ref(50)
const store = useAccountStore();
const fetchData = async () => {
  get(
    "/question_info/get_question_detail", { id: props.id, aid: store.account.id },
    (message) => {
      console.log(message.data);
      questionitem.value = message.data;
    },
    () => {
      store.clearAccount();
    }
  );
  get(
    "/comment_info/get_comment", { qid: props.id },
    (message) => {
      console.log(message.data);
      commentitem.value = message.data.comments;
      totalItems.value = message.data.total;
    },
  );
}

onMounted(() => {
  fetchData(); // 组件加载时请求数据
})
</script>

<style scoped>
.content {
  /* flex-grow: 1; */
  height: 100%;
  padding: 20px;
  gap: 20px;
  background-color: #f5f5f5;
  overflow-y: auto; /* 允许垂直滚动 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 修改为垂直排列的方式 */
.card-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
</style>